<script>
export default {
  name: 'UiText',
  functional: true,
  props: {
    type: {
      type: String,
      default: 'default',
      validator (value) {
        return ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    size: {
      type: String,
      validator (value) {
        if (!value) {
          return true
        }
        return ['mini', 'small', 'medium', 'large'].includes(value)
      }
    }
  },
  render (h, c) {
    return h('span', {
      class: ['ui-text', 'ui-text--' + c.props.type, c.props.size ? ('is-' + c.props.size) : '', c.data.staticClass, c.data.class]
    }, [c.slots().default])
  }
}
</script>
<style lang="less">
.ui-text--success{
  color: #67c23a;
}
.ui-text--primary {
  color: #3385FF;
}
.ui-text--warning {
  color: #ed6a0c;
}
.ui-text--danger {
  color: #f56c6c;
}
.ui-text--info {
  color: #909399;
}
</style>
